
<template>
  <div class="spatial-query-panel">
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane name="spatial">
        <span slot="label">
          <i class="el-icon-data-board"></i> 空间选择
        </span>
        <el-input placeholder="请输入兴趣点" v-model="inputPOI" v-show="isQuery" size="small">
          <el-button slot="append" icon="el-icon-search" @click="queryPOI">查询</el-button>
        </el-input>
        <div class="query-obj">
          <div class="title">查询对象：</div>
          <el-radio-group v-model="spatialRegionLevel" v-for="item in regionLevel" :key="item.region_level" >
            <el-radio :label="item.region_level" v-if="item.region_level!=8?'true':status.showBuild">{{item.name}}</el-radio>
          </el-radio-group>
        </div>
        <div class="btn-group">
          <el-button size="small" @click="drawSpatialQuery_CIRCLEMARKER">点选</el-button>
          <el-button size="small" @click="drawSpatialQuery_CIRCLE">圆选</el-button>
          <el-button size="small" @click="drawSpatialQuery_RECTANGLE">框选</el-button>
          <el-button size="small" @click="drawSpatialQuery_POLYGON">多边形选</el-button>
          <el-button icon="el-icon-delete" size="small" @click="clearDrawFeatures"></el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane name="buffer">
        <span slot="label">
          <i class="el-icon-files"></i> 缓冲分析
        </span>
        <el-input placeholder="请输入兴趣点" v-model="inputPOI" v-show="isQuery" size="small">
          <el-button slot="append" icon="el-icon-search" @click="queryPOI">查询</el-button>
        </el-input>
        <div class="query-obj">
          <div class="title">查询对象：</div>
          <el-radio-group v-model="bufferRegionLevel" v-for="item in regionLevel" :key="item.region_level" >
            <el-radio :label="item.region_level" v-if="item.region_level!=8?'true':status.showBuild">{{item.name}}</el-radio>
          </el-radio-group>

          <div class="buffer-fun">
            <p>
              缓冲方式：
            </p>
            <!-- <el-radio-group v-model="radioFun" @change="bufferFunChange" v-for="(item,index) in bufferType" :key="index">
              <el-radio :label="item.type" >{{item.name}}</el-radio>
            </el-radio-group> -->
            <p>
              <span @click="drawBufferQuery_CIRCLEMARKER">点选</span>
              <span @click="drawBufferQuery_LINE">线选</span>
              <span @click="drawBufferQuery_POLYGON">多边形选</span>
              <span @click="clearDrawFeatures"><i class="el-icon-delete"></i></span>
            </p>
            <!-- <div class="btn-group">
              <el-button size="mini" @click="drawBufferQuery_CIRCLEMARKER">点选</el-button>
              <el-button size="mini" @click="drawBufferQuery_LINE">线选</el-button>
              <el-button size="mini" @click="drawBufferQuery_POLYGON">多边形选</el-button>
              <el-button icon="el-icon-delete" size="mini" @click="clearDrawFeatures"></el-button>
            </div> -->
          </div>
          <div class="buffer-range">
            <div class="buffer-range-title">缓冲范围：</div>
            <div class="buffer-range-input">
              <el-input placeholder="请输入范围值" v-model="inputBuffer" size="small">
                <template slot="append">米（m）</template>
              </el-input>
            </div>
          </div>
          <div class="ground" v-show="isBufferFun">
            <div class="ground-title">地物：</div>
            <select v-model="groundObj" class="ground-select">
              <option v-for="item in bufferDiwuType" :key="item.value" :value="item.value">{{item.label}}</option>
            </select>
          </div>
        </div>
        
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import sgisMapBase from "@/utils/map/sfgis.map.base.js";
  import sgisRegionBase from "@/utils/map/sfgis.region.base.js";
//  import markerLayer from "@/utils/map/lib/systemlayers/poi.marker.layer.js";
  import Layer from "@/utils/map/lib/main.js";
  import mapTool from "@/utils/map/sfgis.map.tool.js";
  import region from "static/config/region.js";
//  import * as regionAPI from "@/api/regionPanel";
//  import * as tiandituPOI from "@/api/tiandituPOI.js";

  export default {
    name: "RegionPanel",
    props: ["mapdata"],
    data() {
      return {
        regionLevel:[],//查询对象
        bufferType:region.bufferType,//绘制方式
        map: null,
        isQuery: true,
        activeName: "spatial",
        inputPOI: "",
        spatialRegionLevel: 2,//空间选择等级
        radioFun: region.bufferType[0].type,//缓冲类型
        inputBuffer: 1000,//缓冲距离
        groundObj: "0",
        bufferDiwuType: region.bufferDiwuType,
        isBufferFun: false,
        bufferRegionLevel:'',//缓冲分析等级
        setBufferDataSetName:region.setBufferDataSetName,//缓冲地物查询所在的面
        status:{
          showBuild:false
        }
      };
    },
    watch: {
      // mapdata(val) {
      //   this.mapdata = val;
      // }
    },
    mounted() {
      if(this.$route.name == "micro"){
        this.status.showBuild = true;
      }
      if (this.$route.name == "fuzzyquery") {
        this.isQuery = true;
      } else {
        this.isQuery = false;
      }
      EventBus.$on("getRLevel",(level)=>{
        if(this.regionLevel.length>0){
          return false;
        }else{
          this.regionLevel = []
          region.regionLevel.map(item=>{
            if(item.region_level >= level){
              this.regionLevel.push(item)
            }
          })
          this.bufferRegionLevel = this.regionLevel[0].region_level;
          this.spatialRegionLevel = this.regionLevel[0].region_level;
        }
      });
      
    },
    methods: {
      bufferFunChange() {
        this.isBufferFun = !this.isBufferFun;
      },
      handleClick() {
        this.inputPOI = "";
//        this.spatialRegionLevel = 0;
//        this.bufferRegionLevel = 0;
//        this.radioFun = "";
//        this.inputBuffer = 20;
        this.groundObj = "0";
        this.isBufferFun = false;
//        this.clearDrawFeatures();
      },
      drawSpatialQuery_CIRCLEMARKER() {
        mapTool.drawSpatialQuery("CIRCLEMARKER", this.spatialRegionLevel, "1");
      },
      drawSpatialQuery_CIRCLE() {
        mapTool.drawSpatialQuery("CIRCLE", this.spatialRegionLevel, "1");
      },
      drawSpatialQuery_RECTANGLE() {
        mapTool.drawSpatialQuery("RECTANGLE",this.spatialRegionLevel, "1");
      },
      drawSpatialQuery_POLYGON() {
        mapTool.drawSpatialQuery("POLYGON", this.spatialRegionLevel, "1");
      },
      drawBufferQuery_CIRCLEMARKER() {
        let that = this;
        if(this.bufferRegionLevel == 8&&this.inputBuffer>1000){//建筑物缓冲范围不超过1000
          this.$message.warning("建筑物的缓冲范围不能超过1000米，请重新输入缓冲范围!");
          return;
        }
        //缓冲分析分为两种类型，绘制=DRAW和选择地物=SELECT
        if (that.radioFun=="DRAW") {
          //1  绘制类型的
          mapTool.drawBufferQuery_circleMarker(that.bufferRegionLevel, "1", that.radioFun, that.inputBuffer/100000);
        } else {
          //2 选择地物的
          mapTool.setBufferDataSetName(that.setBufferDataSetName); //以河流为地物
          mapTool.drawBufferQuery_circleMarker(that.bufferRegionLevel, "1", that.radioFun, that.inputBuffer/100000);
        }
      },
      drawBufferQuery_LINE() {
        let that = this;
        if(this.bufferRegionLevel == 8&&this.inputBuffer>1000){//建筑物缓冲范围不超过1000
          this.$message.warning("建筑物的缓冲范围不能超过1000米，请重新输入缓冲范围!");
          return;
        }
        //缓冲分析分为两种类型，绘制=DRAW和选择地物=SELECT
        if (that.radioFun=="DRAW") {
          //1  绘制类型的
          mapTool.drawBufferQuery_poline(that.bufferRegionLevel, "1", that.radioFun, that.inputBuffer / 100000);
        } else {
          //2 选择地物的
          mapTool.setBufferDataSetName(that.setBufferDataSetName); //以河流为地物
          mapTool.drawBufferQuery_poline(that.bufferRegionLevel, "1", that.radioFun, that.inputBuffer / 100000);
        }
      },
      drawBufferQuery_POLYGON() {
        let that = this;
        if(this.bufferRegionLevel == 8&&this.inputBuffer>1000){//建筑物缓冲范围不超过1000
          this.$message.warning("建筑物的缓冲范围不能超过1000米，请重新输入缓冲范围!");
          return;
        }
        //缓冲分析分为两种类型，绘制=DRAW和选择地物=SELECT
        if (that.radioFun=="DRAW") {
          //1  绘制类型的
          mapTool.drawBufferQuery_polygon(that.bufferRegionLevel, "1", that.radioFun, that.inputBuffer / 100000);
        } else {
          //2 选择地物的
          mapTool.setBufferDataSetName(that.setBufferDataSetName); //以河流为地物
          mapTool.drawBufferQuery_polygon(that.bufferRegionLevel, "1", that.radioFun, that.inputBuffer / 100000);
        }
      },
      clearDrawFeatures() {
        mapTool.clearDrawFeatures();
      },
      async queryPOI() {
//        markerLayer.clearMarker();
        this.map = sgisMapBase.getMap();
        let level = this.map.getZoom();
        let bounds = this.map.getBounds();
        let boundsText = `${bounds._southWest.lng},${bounds._southWest.lat},${
          bounds._northEast.lng
          },${bounds._northEast.lat}`;
        if (this.inputPOI != "") {
          // 查询参数详见 http://lbs.tianditu.gov.cn/server/search.html
          let params = {
            keyWord: this.inputPOI,
            level: level,
            mapBound: boundsText,
            queryType: "1",
            count: "10", // 默认返回10条结果
            start: "0"
          };
//          let result = await tiandituPOI.getPOI(params);
//          if (
//            result.status == 200 &&
//            result.data.pois &&
//            result.data.pois.length > 0
//          ) {
//            this.showResult(result);
//            if (result.data.pois.length == 10) {
//              this.$message.warning("查询关键字不明确，默认展示前10条数据！");
//            }
//          } else {
//            // 查询区划
//            if (result.data.area && result.data.area.points) {
//              this.showResult(result);
//              return;
//            }
//            this.$message.info("地图范围太大，请缩放到城市级别进行查询！");
//          }
        } else {
          this.$message.warning("请输入关键字进行查询!");
        }
      },
      showResult(result) {
        if (result.data.resultType == 1) {
          let pois = result.data.pois;
          pois.map(poi => {
            let item = {
              name: poi.name,
              address: poi.address,
              lonlat: poi.lonlat.split(" ").reverse()
            };
//            markerLayer.addMarkers(item);
          });
//          markerLayer.fitTo();
        } else if (result.data.resultType == 3) {
          let area = result.data.area;
          let region = this.transFromRegion(area.points[0].region);
          let data = {
            name: area.name,
            center: area.lonlat.split(","),
            region: region
          };
//          markerLayer.drawZone(data);
        }
      },
      transFromRegion(region) {
        let array = region.split(",");
        let data = [];
        array.map(point => {
          data.push(point.split(" ").reverse());
        });
        return data;
      }
    }
  };
</script>

<style lang="scss" scoped>
  $activeColor:rgba(46,218,255,1);
@import "./../../assets/css/rule.scss";
  .spatial-query-panel {
    width: 400px;
    height: 0;
    background:rgba(23,128,154,0.8);
    // box-shadow:0px 4px 7px 0px rgba(0, 0, 0, 0.15);
    margin-top: 2px;
    margin-left: 143px;
    // border: 1px solid #00b5ad;
    .el-tabs--border-card{
      background:$panelContentBg;
      border: 1px solid $panelContentBg;
      
    }
    .el-tabs__header{
      background:$panelTitleBg;
      border-bottom: 0px solid #E4E7ED;
    }
    .query-obj {
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px;
      margin: 5px 0;
      padding: 0 10px 10px 10px;
      .title {
        font-size: 1.4rem;
        //font-weight: bold;
        color: $fontColorLimit;
        height: 50px;
        line-height: 50px;
      }
      .el-radio-group{
        margin-bottom: 10px;
        margin-right: 20px;
      }
      .el-radio__label{
        color: $fontColorLimit;
      }
      .el-radio__input.is-checked+.el-radio__label{
        color:$activeColor;
      }
    }
    .buffer-fun {
      font-size: 1.4rem;
      //font-weight: bold;
      color: $fontColorLimit;
      padding: 8px 0;
      display: inline-block;
      margin: 8px 0;
      p{
        float: left;
        span{
          margin-right: 6px;
        }
      }
    }
    .buffer-range {
      height: 32px;
      line-height: 32px;
      display: flex;
      .buffer-range-title {
        font-size: 1.4rem;
        color: $fontColorLimit;
      }
      .buffer-range-input {
        width: 275px;
        .el-input-group{

        }
        .el-input-group__append{
          background-color: none;
          color: $fontColorLimit;
        }
        input{
          background: none;
          color:$fontColorLimit;
          border-color:$borderColorW;
        }
      }
    }
    .ground {
      height: 32px;
      line-height: 32px;
      padding-top: 8px;
      display: flex;
      .ground-title {
        font-size: 1.4rem;
        font-weight: bold;
      }
      .ground-select {
        color: #606266;
        font-size: 1.4rem;
        border: 1px solid #dcdfe6;
        margin-left: 28px;
        width: 183px;
        border-radius: 3px;
      }
    }
    .btn-group {
      text-align: center;
      button{
        width: auto;
        height: auto;
        float: left;
      }
    }
  }
</style>
<style lang="scss">
  @import "./../../assets/css/rule.scss";
  .spatial-query-panel {
    .el-tabs__header{
      background:$panelTitleBg;
      border-bottom: 0px solid #E4E7ED;
      .el-tabs__item{
        color:$fontColorLimit;
      }
      .el-tabs__item.is-active{
        color: $fontColorActive2;
        background-color: $panelContentBg;
        border-right-color: #dcdfe600;
        border-left-color: #dcdfe600;
      }
      .el-tabs__item:not(.is-disabled):hover{
        color: $fontColorActive2;
      }
    }
    .el-tabs__content{
      .el-radio__inner{
        background:none;
      }
      .el-radio__inner:hover{
        border-color: $fontColorActive2;
      }
      .el-radio__input.is-checked .el-radio__inner{
        border-color: $fontColorActive2;
        background: $fontColorActive2!important;
      }
      .el-radio__input.is-checked+.el-radio__inner{
        border-color: $fontColorActive2;
        background: $fontColorActive2!important;
      }
      .el-radio__label{
        color: $fontColorLimit;
      }
      .el-radio__input.is-checked+.el-radio__label{
        color:$fontColorActive2;
      }
      .btn-group{
        .el-button{
          background: none;
          border: 1px solid rgba(255,255,255,0.2);
          color: $fontColorLimit;
        }
      }
      .buffer-range {
        height: 32px;
        line-height: 32px;
        display: flex;
        .buffer-range-title {
          font-size: 1.4rem;
          color: $fontColorLimit;
        }
        .buffer-range-input {
          width: 275px;
          .el-input-group__append{
            background: none;
            color: $fontColorLimit;
            border-color:$borderColorW;
          }
          input{
            background: none;
            color:$fontColorLimit;
            border-color:$borderColorW;
          }
        }
      }
    }
  }
</style>